<template>
<div class="index-page">
  <!-- 轮播图 -->
  <van-swipe :autoplay="3000">
  <van-swipe-item v-for="(image, index) in images" :key="index">
    <img v-lazy="image" />
  </van-swipe-item>
</van-swipe>
<div class="nav">
  <!-- 搜索框 -->
 <div class="search">
   <van-search
  v-model="value"
  show-action
  placeholder="请输入小区或地址"
  @search="onSearch"

>
<!-- <template #left>
  <i ><van-icon name="arrow-left" /></i>
</template> -->
<template #left>
<div @click="$router.push('/city')">{{cityname?cityname:"上海"}}▼ |</div>
</template>

  <template #action>
  </template>
</van-search>

 </div>
  <!-- 地图 -->
<div class="map" @click='$router.push("/map")'><!-- 跳转地图 -->
    <van-icon name="location-o" />
</div>

</div>
<!--宫格部分  -->
<van-grid  icon-size='40px' ><!-- 改尺寸 -->
  <van-grid-item icon="wap-home-o" text="整租" />
  <van-grid-item icon="friends-o" text="合租" />
  <van-grid-item icon="location-o" text="地图找房" />
  <van-grid-item icon="home-o" text="去出租" to='/gotorent'/>
</van-grid>

<!-- 租房小组 -->
<div class="group">
  <div class="group-top">
  <h4 class="title">租房小组</h4>
   <span class="more">更多</span>
</div>
 <!-- 图片区域 -->
  <div class="group-bottom">
   <!-- <div class="top"> -->
   <div class="top">
     <div class="left">
      <div class="pic"> <img src="http://115.159.87.220:8080/img/groups/1.png" alt="图片"></div>
      <div class="text">
        <p>家住回龙观归属的感觉</p>
      </div>
    </div>
     <div class="right">
      <div class="pic"> <img src="http://115.159.87.220:8080/img/groups/1.png" alt="图片"></div>
      <div class="text">
        <p>家住回龙观归属的感觉</p>
      </div>
    </div>
   </div>
    <div class="bottom">
     <div class="left">
      <div class="pic"> <img src="http://115.159.87.220:8080/img/groups/1.png" alt="图片"></div>
      <div class="text">
        <p>家住回龙观归属的感觉</p>
      </div>
    </div>
     <div class="right">
      <div class="pic"> <img src="http://115.159.87.220:8080/img/groups/1.png" alt="图片"></div>
      <div class="text">
        <p>家住回龙观归属的感觉</p>
      </div>
    </div>
   </div>
  </div>
</div>
</div>

</template>

<script>
import { getcityName } from '@/utils/storage'

export default {
  name: 'index-page',
  data () {
    return {
      value: '',
      images: [
        ' http://liufusong.top:8080/img/swiper/1.png',
        ' http://liufusong.top:8080/img/swiper/2.png',
        ' http://liufusong.top:8080/img/swiper/3.png'
      ],
      cityname: ''
    }
  },
  created () {
    this.cityname = getcityName()
  },
  methods: {
    onSearch () {

    }
  }

}
</script>

<style lang='less' scoped>
.left{
  width: 172px;
  height: 50px;
  background-color: #fff;
  display: flex;
  font-size: 14px;
  margin: 0 0 10px;
  margin-left: 15px;
   align-items: center;
}
.right{
  width: 172px;
  height: 50px;
  background-color: #fff;
  display: flex;
  font-size: 14px;
  margin: 0 0 10px;
  align-items: center;
   margin-left: 15px;

}

.pic{
  width: 50px;
  height: 50px;
}
img{
  width: 100%;
}
.text{
width: 20vw;
}
.right p{
  /* margin: 0 25px;
  margin-top: 8px; */
  margin: 0;
  padding: 0;

}

.nav{
  display: flex;
  justify-content: space-between;

}
.map{
  position: absolute;
  top: 25px;
  right: 10px;
 align-items: center;
 font-size: 25px;
 width: 34px;
 height: 34px;
 line-height: 34px;
 color: #fff;
}
.group-bottom{
  width: 355px;
  height: 130px;
  display: flex;
  justify-content: space-between;
}

.group{
   background-color: #f6f5f6;
}
.group-top {
    padding: 0 10px;
    display: flex;/* 开启flex布局 */
    justify-content: space-between;/* 左右分布 */
    align-items: center;/* 垂直居中 */
}
.group-top.title{
  font-size: 15px;
}
.group-top.more {
    color: #787d82;

    right: 0;
    font-size: 14px;

}
.van-grid.van-hairline--top{
color:#81d7b3;
}
.van-grid-item__icon{
  background-color:#67cd9f;
  border-radius: 50%;
}
.van-swipe-item{
    display: inline-block;
    width: 100%;
    height: 176px;
    flex: 1 1;

}
.van-swipe-item img{
    width: 100%;
    height: 212px;
    vertical-align: top;
}
.van-search{
  position: absolute;
  top:25px;
  background-color: #fff;
  height: 34px;
  margin: 0  10px;
  padding: 5px 5px 5px 8px;
  border-radius: 3px;
  padding: 0 10px;
  text-align: center;
}
.van-grid{
height: 122px;
font-size: 14px;
}
.van-grid-item__icon{
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;

}
.van-grid-item__text{
  font-size: 14px;
}

</style>
